<template>
  <div>
    <el-dialog :title='option.title' :visible.sync='isShow' width="770px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div >
          <el-card>
            <el-form size="mini" ref="form" :model="form"  label-width="100px" :rules="rulesBase"
              label-position="left">
              <el-row :gutter="30">
                <el-col :span="12">
                  <el-form-item prop="TELLERNO" label="柜员号：">
                    <el-input v-model="form.TELLERNO" placeholder="请输入柜员号" :disabled="option.isChecked"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="TELLERNAME" label="柜员姓名：">
                    <el-input v-model="form.TELLERNAME" placeholder="请输入柜员姓名" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="BRANCHNO" label="所属机构:">
                    <el-select v-model="form.BRANCHNO" filterable>
                      <el-option v-for="item in brnoList" :key="item.value" :label="item.cname" :value="item.cname"
                        :disabled="item.disabled">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="柜员角色：" prop="TELLERROLE">
                    <el-select v-model="form.TELLERROLE" filterable placeholder="请选择柜员角色">
                                    <el-option
                        v-for="item in option.TELLERROLELIST"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="TEL" label="联系方式：">
                    <el-input v-model="form.TEL" placeholder="请输入联系方式" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="EMAIL" label="邮箱：">
                    <el-input v-model="form.EMAIL" placeholder="请输入邮箱" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="登录方式：" prop="LOGINFLAG">
                    <el-select v-model="form.LOGINFLAG" filterable placeholder="请选择登录方式">
                                    <el-option
                        v-for="item in this.LOGINFLAGLIST"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="12" :style="{height:'46.88px'}" v-if="this.option.log == '1'">
                  <el-form-item prop="LOGINPWD" label="密码">
                    <el-input  v-model.number="form.LOGINPWD" placeholder="请输入密码" :disabled="option.isChecked"  :type= "form.pass?'text':'password'">
                      <el-switch slot="append"
                          v-model="form.pass"
                          active-color="#13ce66"
                          inactive-color="grey" >
                        </el-switch>
                    </el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :span="12" :style="{height:'46.88px'}">
                  <el-form-item prop="LOGINPWD" label="密码：">
                    <el-input :type="pwdType" v-model="form.LOGINPWD"  placeholder="请输入密码"></el-input>
                    <span class="show-pwd" @click="showPwd">
                      <svg-icon :icon-class="pwdType=='password'?'eye-close':'eye'" />
                    </span>
                  </el-form-item>
                </el-col>
                </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType">取消</el-button> 
            <el-button type="primary" size="mini"  @click="add" >确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import selectTree from "@/components/selectTree2/";
import branchList from "@/message/shared/branch-list";
import request from "@/common/utils/request";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import request1 from "@/common/utils/requestTest";
import add from '@/message/tellerManagement/tellerInfoMaintenance/add';
import md5 from 'js-md5';

export default {
  name: "",
  data() {
    let numCheck = (rule, value, callback) => {
      //校验密码
      if (value != ""){
        let reg = /(^[0-9]{6}$)/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入6位有效数字"));
        }
      } else {
        callback();
      }
    };
    return {
      loading: false,
      brnoList: [],
      currentPage: 1, //当前页
      pwdType: "password",
      form: {
        TELLERNO:"",
        TELLERNAME:"",
        BRANCHNO:"",
        TELLERROLE:"",
        TEL:"",
        EMAIL:"",
        LOGINFLAG:"1",
        LOGINPWD:"123456"
      },
      LOGINFLAGLIST: [
        // { name: "0-指纹", value: "0" },
        { name: "1-密码", value: "1" }
      ],
      rulesBase: {
      TELLERNO: [
        { required: true, message: "请输入柜员号", trigger: "change" }
      ],
      TELLERNAME: [
        { required: true, message: "请输入柜员姓名", trigger: "change" }
      ],
      BRANCHNO: [
        { required: true, message: "请选择所属机构", trigger: "change" }
      ],
      TELLERROLE: [
        { required: true, message: "请选择柜员角色", trigger: "change" }
      ],
      LOGINPWD: [
        {require: false,validator: numCheck,trigger: "blur"}
      ],
    },
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  components: {
    selectTree
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
  },
  methods: {
    showPwd() {
        this.pwdType = this.pwdType == "password" ? "" : "password";
      },
    initList() {
      //初始化下拉列表
      let resBody = new branchList();
      resBody.data.orgno = this.$store.getters.BranchNum;
      request(resBody)
        .then(response => {
          this.loading = false;
          this.brnoList = response.RspInfo.Result;
        })
        .catch(error => {
          this.loading = false;
          console.error("错误信息", error);
        });
    },
    add() {
      //添加
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody = new add();
          resBody.data.OPRFLAG=this.option.log=="1"?"1":"3";
          resBody.data.TELLERNO=this.form.TELLERNO;
          resBody.data.TELLERNAME=this.form.TELLERNAME;
          resBody.data.BRANCHNO=this.form.BRANCHNO.split("-")[0];
          resBody.data.BRANCHNAME=this.form.BRANCHNO.split("-")[1];
          resBody.data.TELLERROLE=this.form.TELLERROLE;
          resBody.data.TEL=this.form.TEL==""?"15541241214":this.form.TEL;
          resBody.data.EMAIL=this.form.EMAIL==""?"9541241241@qq.com":this.form.EMAIL;
          resBody.data.LOGINFLAG=this.form.LOGINFLAG;
          if(this.form.LOGINPWD!="")
          resBody.data.LOGINPWD=md5(this.form.LOGINPWD).toUpperCase();
          request1(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.$emit("refreshTable");
                let mes = this.option.log == "1" ? "新增" : "修改";
                this.$message({
                  type: "success",
                  message: `柜员信息${mes}${response.SYS_HEAD.ReturnMessage}!`
                });
                this.isShow = false;
              } else {
                this.$message({
                  type: "error",
                  message: `${response.SYS_HEAD.ReturnMessage}!`
                });
              }
              this.loading = false;
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          this.$message({
            type: "warning",
            message: "请输入合法的数据！"
          });
          return false;
        }
      });
    },
    openCreate() {
      //打开弹窗事件
      this.loading = true;
      this.initList();
      if (this.$refs.form) {
        this.$refs["form"].resetFields(); //清楚表单验证
      }
      this.$nextTick(function() {
        if (this.option.log == "2") {
          this.updateDate();
        }else{
        }
      });
      this.loading = false;
    },
    updateDate() {
      this.form.TELLERNO = this.option.currentRow.TELLERNO;
      this.form.TELLERNAME = this.option.currentRow.TELLERNAME;
      this.form.BRANCHNO = this.option.currentRow.BRANCHNO+"-"+this.option.currentRow.BRANCHNAME;
      this.form.TELLERROLE = this.option.currentRow.TELLERROLE;
      this.form.TEL = this.option.currentRow.TEL;
      this.form.EMAIL = this.option.currentRow.EMAIL;
      this.form.LOGINFLAG = this.option.currentRow.LOGINFLAG;
      // this.form.LOGINPWD = this.option.currentRow.LOGINPWD;
      this.form.LOGINPWD = "";
    },
    addType() {
      //关闭弹窗事件，清除表单验证
      this.option.isShow = false;
      this.$refs["form"].clearValidate();
    },
  }
};
</script>
<style lang="scss" scoped>
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: gray;
      cursor: pointer;
      user-select: none;
    }
</style>
